<template>
    <el-table
      :data="PermisstionArr"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="权限值" prop="code"></el-table-column>
    <el-table-column label="修改时间" prop="updateTime"></el-table-column>
    <el-table-column label="操作" >
        <template #="{row,$index}">
            <el-button @click="addPermisstion(row)" type="primary" size="small" :disabled="row.level==4">{{ row.level==3?'添加功能':'添加菜单' }}</el-button>
            <el-button @click="updatePermisstion(row)" type="primary" size="small" :disabled="row.level==1?true:false">编辑</el-button>
            <el-popconfirm title="确定删除?" @confirm="removeMenu(row.id)">
                <template #reference>
                    <el-button  type="primary" size="small" :disabled="row.level==1?true:false">删除</el-button>
                </template>
            </el-popconfirm>
        </template>
    </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="menuData.id?'更新菜单':'添加菜单'"
    >
        <el-form>
            <el-form-item label="名称">
                <el-input placeholder="请输入菜单名称" v-model="menuData.name"></el-input>
            </el-form-item>
            <el-form-item label="权限">
                <el-input placeholder="请输入权限名称" v-model="menuData.code"></el-input>
            </el-form-item>
            
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
        </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { reqAddOrUpdateMenu, reqAllPermission, reqRemoveMenu } from '@/api/acl/menu';
import { PermisstionList, PermissionResponseData, Permisstion, MenuParams } from '@/api/acl/menu/type';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
//控制对话框的显示与隐藏
let dialogVisible=ref<boolean>(false);
//存储菜单数据
let PermisstionArr=ref<PermisstionList>([]);
//携带的参数
let menuData=reactive<MenuParams>({
    id: 0,
    code:"",
    level: 0,
    name: '',
    pid: 0,

})

onMounted(()=>{
    getHasPermisstion();
})
//获取菜单数据
const getHasPermisstion=async ()=>{
    let result:PermissionResponseData=await reqAllPermission();
    console.log("获取菜单数据");
    console.log(result);
    if(result.code==200){
        PermisstionArr.value=result.data;
    }
}
//添加菜单按扭
const addPermisstion=(row:Permisstion)=>{
    //清空数据
    Object.assign(menuData,{
        code:"",
        level: 0,
        name: '',
        pid: 0,
    })
    dialogVisible.value=true;
    //收集新增的菜单的level
    menuData.level=row.level+1;
    //给谁新增子菜单
    menuData.pid=row.id;
    
}
//编辑已有的菜单
const updatePermisstion=(row:Permisstion)=>{
    dialogVisible.value=true;
    Object.assign(menuData,row);
}
//确定按钮的回调
const save=async ()=>{
    let result=await reqAddOrUpdateMenu(menuData);
    console.log('更新或添加菜单');
    console.log(result);
    if(result.code==200){
        getHasPermisstion();
        ElMessage({
            type: 'success',
            message: menuData.id?'更新成功':'添加成功'
        })
    }
    else{
        ElMessage({
            type: 'error',
            message: menuData.id?'更新失败':'添加失败'
        })
    }
    dialogVisible.value=false;
}
//删除按钮的回调
const removeMenu=async (id:number)=>{
    let result=await reqRemoveMenu(id);
    if(result.code==200){
        ElMessage.success("删除成功");
        getHasPermisstion();
    }
    else{
        ElMessage.error("删除失败");
    }
}
</script>
<style scoped>
</style>